
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        var ctx = document.getElementById('canvas')
            context = ctx.getContext('2d')
            Width = document.documentElement.clientWidth
            Height = document.documentElement.clientHeight
            ctx.width = Width
            ctx.height = Height
            color = 55
            rounds = []
        function Round_item (index, x, y, r, color) {
            this.index = index
            this.x = x
            this.y = y
            this.r = r
            this.color = 'hsl('+ color +',100%,80%)'
        }
        Round_item.prototype.draw = function () {
            context.fillStyle = this.color
            context.beginPath()
            context.arc(this.x, this.y, this.r, 0, 2*Math.PI, false)
            context.closePath()
            context.fill()
        }
        window.onmousemove = function (event) {
            rounds.push({
                x: event.clientX,
                y: event.clientY,
                r: 3,
            })
        }
        function animate () {
            // 清空画布
            context.clearRect(0, 0, Width, Height)
            for (let i = 0; i < rounds.length; i ++) {
                // 半径每次增大0.9
                rounds[i].r += 0.9
                // 由于hsl的颜色范围是1-360
                if (color > 360) {
                    color = 55
                }
                // 颜色变化
                color += 0.1
                rounds[i] = new Round_item(i, rounds[i].x, rounds[i].y, rounds[i].r, color)
                rounds[i].draw()
                // 圆的半径大于10就在下一次勾勒得时候消失
                if (rounds[i].r > 10) {
                    rounds.splice(i, 1)
                }
            }
            requestAnimationFrame(animate)
        }
        animate()
    </script>
</body>
</html>
